﻿﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下载中心_软件下载_资料下载_帮助文档下载_其他下载</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/common.css"/>
    <link rel="shortcut icon" href="static/images/logo.jpg" type="image/x-icon"/>
    <link rel="stylesheet" href="static/css/font_333802_ypr9k5jwbv.css"/>
    <link rel="stylesheet" href="static/css/iconfont.css" type="text/css"/>
    <style type="text/css">
        .ts-search-box .search-content {
            width: 178px;
            height: 34px;
        }

        .ts-search-box .search-btn {
            top: 48px;
        }

        .reco:hover {
            color: #3bb5ff;
        }

        .download-icon {
            width: 18px;
            height: 18px;
            margin-right: 5px;
        }

        .page-box {
            padding-top: 0;
        }
    </style>
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    .el-carousel__container{
            height: 420px;
        }
        .regisers{
            color: #2b9dff;
        }
        .regisers:hover{
            cursor: pointer;
            color: #155bff;
        }
        .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
            border: none;
            height: 80px;
            line-height: 80px;
        }
        .el-menu.el-menu--horizontal{
            border:none;
        }
        .tab{
            width: 80px;
            height: 40px;
            background-color: #F3F5F7;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #8D8D8D;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="header">
        <div class="header-box">
            <a href="#" class="logo"><img src="static/images/logo.jpg" width="119" height="70" alt="叮叮财税">
                <span> <img src="static/images/title.png"></span>
            </a>
            <ul id="header-nav">
                <li id="index"><a href="index.html">首页</a></li>
                <li id="course"><a href="study.html">课程</a></li>
                <li id="news"><a href="consult.html">资讯</a></li>
                <li id="download"><a href="download.html">下载</a></li>
                <li id="service"><a href="service.html">服务</a></li>
            </ul>
            <div class="login rt" id="user-info">
                <el-menu class="el-menu-demo" mode="horizontal" v-if="userPhone">
                    <el-submenu index="1">
                        <template slot="title">{{userPhone}}</template>
                        <el-menu-item index="" style="padding: 10px;width: 200px;height: 190px;position:relative;background: #fff">
                            <a href="home.html"  style="width: 100%;height: 100%;display: block;">
                                <div>{{userInfo.name}}{{userInfo.phone}}</div>
                                <div style="overflow: hidden;">
                                    <div class="tab">我的课程</div>
                                    <div class="tab">我的收藏</div>
                                    <div class="tab">个人中心</div>
                                    <div class="tab">咨询记录</div>
                                </div>
                            </a>
                            <div style="position:relative;z-index: 100;top: -34px;left: 90px;">
                                <el-button type="primary" size="small" @click="loginOut">安全退出</el-button>
                            </div>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
                <a href="javascript:;" class="ml-30 mr-30" id="loginBtn" @click="showLogin" v-if="!userPhone">
                    <i class="login-ico"></i>登录
                </a>

                <a href="javascript:;" id="logoutBtn" @click="showRegister" v-if="!userPhone">
                    <i class="regin-ico"></i>注册
                </a>
            </div>
            <div class="clearBoth"></div>
        </div>
        <div class="clearBoth"></div>
    </div>
<!-- 弹框 -->
<el-dialog
        :title="title"
        :visible.sync="loginDialogVisible"
        :close-on-click-modal="false"
        width="400px"
        center>
    <div>
        <el-form :model="form" :rules="rules" ref="form" label-width="60px">
            <el-form-item label="手机号" prop="phone">
                <el-input  v-model="form.phone" placeholder="请输入手机号" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" style="width: 300px;"></el-input>
            </el-form-item>
        </el-form>
        <div style="text-align: right">
            <span @click="isLogin = false" v-if="isLogin" class="regisers">去注册</span>
        </div>
        <div style="text-align: right">
            <span @click="isLogin = true" v-if="!isLogin" class="regisers">去登录</span>
            </div>
    </div>
    <span slot="footer" class="dialog-footer"  v-if="isLogin">
            <el-button @click="loginDialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="submitCostomer('form')">{{loading?'登录中':'登录'}}</el-button>
        </span>
    <span slot="footer" class="dialog-footer"  v-if="!isLogin">
            <el-button @click="loginDialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="submitCostomer('form')">{{loading?'注册中':'注册'}}</el-button>
        </span>
</el-dialog>
<!------------------------在线客服  / 回到顶部----------------------------------->
<div class="tools">
    <div id="right-float" style="display:none;">
        <!--<a href="/static/member/qjhy/index.html" target="_blank"><img src="static/picture/right-float.png"/></a>-->
    </div>
    <div style="height:36px;width:1px;margin-top:20px;margin-bottom:5px;">
        <div id="top" style="display: none;">
            <a href="javascript:;" style="margin-left:190px;margin-top:0px;"></a>
        </div>
    </div>
    <div id="help">
        <a href="https://xiaojuzi.shujet.com/visitor/chat" target="_blank"
           style="margin-left:190px;margin-top:0px;background: transparent"></a>
    </div>
</div>
<div class="division">
    <div style="width: 1190px;min-height: 360px;margin: 10px auto">
        <el-table
                :data="fileData"
                v-loading="loadingTable"
                style="width: 100%;height: 100%"
                >

            <el-table-column
                    prop="title"
                    label="文件名"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="size"
                    label="大小"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="created_at"
                    label="上传时间"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="下载"
                    align="center"
            >
                <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="downLoad(scope.row.conten_url)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

</div>

<!--------------------底部------------------->
    <div class="footer">
        <div class="footer-box">
            <div class="service-nav lf">
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <a href="" target="_blank">如何注册</a>
                        <a href="" target="_blank">如何登陆</a>
                        <a href="" target="_blank">如何观看</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>
                        <a href="" target="_blank">服务咨询</a>
                        <a href="" target="_blank">联系我们</a>
                        <!--<a href="" target="_blank">服务网点</a>-->
                    </dd>
                </dl>
                <dl>
                    <dt>办税链接</dt>
                    <dd>
                        <a href="https://12366.chinatax.gov.cn/bsfw/onlinetaxation/main" target="_blank">网上办税</a>
                        <a href="http://www.chinatax.gov.cn/" target="_blank">国家税务总局</a>
                        <a href="http://www.sccz.gov.cn/" target="_blank">四川省财政厅</a>
                    </dd>
                </dl>
            </div>

            <div class="help rt">
                <div class="help-phone">
                    <i class="d-icon"></i>
                    电话客服：<strong>400-6666-6666</strong>
                </div>
                <div class="huiyuan">
                    <i class="h-icon"></i>
                    会员专线：<strong>028-666666666</strong>
                </div>
                <!--			<div class="online">
                                <a href="" target="_blank">
                                    <i class="xinxi"></i>
                                    服务咨询
                                </a>
                            </div>-->
            </div>
            <div class="barcode rt">
                <img src="img/contact.png"/>
                <p>关注叮叮财税</p>
            </div>
        </div>
        <div class="footer-copy">
            <div class="a-box">
                <a href="">隐私条款</a> |
                <a href="">网站地图</a> |
                <a href="">版权声明</a>
            </div>
            <p>&copy;2018 成都东软学院@丁艳</p>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            var r = /^[^\u4e00-\u9fa5]+$/
            if(!r.test(value)){
                callback(new Error('密码不能为中文!'));
            }
            if (value.length < 6 ) {
                callback(new Error('密码长度在 6 到 18 个字符!'));
            }
            callback();
        }
    };
    var phoneValid = (rule, value, callback) => {
        let phoneReg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
        if (!value) {
            callback(new Error('请输入手机号码'))
        }
        if (!phoneReg.test(value)) {
            callback(new Error('请输入正确的手机号码'))
        }
        callback()
    };
    new Vue({
        el: '#app',
        data: {
            title:'',
            form: {
                phone:'',
                password:''
            },
            rules: {
                phone: [
                    { validator: phoneValid, trigger: 'change' }
                ],
                password: [
                    { validator: validatePass, trigger: 'change' }
                ]
            },
            isLogin:false,
            loading:false,
            loadingTable:false,
            loginDialogVisible:false,
            fileData: [],
            contentData: [],
            headData: [],
            shareData: [],
            shenData: [],
            caishuiData: [],
            token: '',
            userPhone:'',
            userInfo:{},
            fileHttp: 'http://xiaopengbest.cn/api/common/file?type=',
            loginHttp: 'http://xiaopengbest.cn/api/user/session',
        },
        watch: {
            loginDialogVisible:function (val) {
                if (!val) {
                    Object.keys(this.form).forEach(key => this.form[key] = '');
                    this.$refs['form'].resetFields();
                }
            },
            isLogin:function (val) {
                if (val) {
                    this.title='登录';
                } else{
                    this.title='注册';
                }
            }
        },
        created() {
            this.fileHttp = this.fileHttp + this.GetRequest('id');
            this.token = localStorage.getItem('token');
            if(this.token){
                this.token =(this.token.replace('"',''));
            }
            this.userPhone = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).phone:'';
            this.userInfo = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):'';
            this.getBannerList();
        },
        methods: {
            loginOut() {
                localStorage.clear();
                // window.location.href = 'http://xiaopengbest.cn/index.html';
                window.location.reload();
            },
            downLoad(val) {
                if (this.token) {
                    window.open(val);
                } else {
                    this.title='登录';
                    this.isLogin = true;
                    this.loginDialogVisible = true;
                }

            },
            GetRequest(value) {
                let url = decodeURI(location.search);
                let object = {};
                if(url.indexOf("?") != -1)
                {
                    let str = url.substr(1);
                    let strs = str.split("&");
                    for(let i = 0; i < strs.length; i ++)
                    {
                        object[strs[i].split("=")[0]]=strs[i].split("=")[1]
                    }
                }
                return object[value];
            },
            showLogin() {
                this.title='登录';
                this.isLogin = true;
                this.loginDialogVisible = true;
            },
            showRegister() {
                this.title='注册';
                this.isLogin = false;
                this.loginDialogVisible = true;
            },
            submitCostomer(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.isLogin){
                            this.toLogin();
                        } else {
                            this.toRegister();
                        }
                    } else {
                        return false;
                    }
                });
            },
            toLogin() {
                this.loading = true;
                axios.post(this.loginHttp, {
                    phone: this.form.phone,
                    password:this.form.password
                }).then((res) => {
                    if (res.data.code == 200) {
                        this.loading = false;
                        this.$message({
                            type:'success',
                            message:'登录成功',
                            duration:1000
                        });
                        this.loginDialogVisible = false;
                        this.userPhone = res.data.data.phone;
                        localStorage.setItem('userInfo', JSON.stringify(res.data.data));
                        localStorage.setItem('token', JSON.stringify(res.data.data.api_token));
                        window.location.reload();
                    }
                }).catch((err)=> {
                    this.loading = false;
                    this.$message.warning(err.response.data.msg || "数据异常，请重试");
                });
            },
            toRegister() {
                this.loading = true;
                axios.post(this.registerHttp, {
                    phone: this.form.phone,
                    password:this.form.password
                }).then((res) => {
                    if (res.data.code == 200) {
                        this.loading = false;
                        this.$message({
                            type:'success',
                            message:'注册成功,去登陆',
                            duration:1000
                        });
                        this.isLogin = true;
                    }
                }).catch((err)=> {
                    this.loading = false;
                    this.$message.warning(err.response.data.msg || "数据异常，请重试");
                });
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            getBannerList() {
                const self = this;
                self.loadingTable = true;
                axios.get(this.fileHttp, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                            'Authorization': 'Bearer ' + this.token,
                        }
                    }
                )
                    .then(function (res) {
                        self.loadingTable = false;
                        self.fileData = res.data.data;
                    }).catch(function (res) {
                    self.loadingTable = false;
                    console.log(res);
                });
            }
        }
    });
</script>
</html>
